import React, { Component } from 'react';
import { connect } from 'react-redux'
import './App.css';
import { setMusicListAsync } from './redux/actions'
import Left from './components/Left/Left'
import RightBottom from './components/right_bottom/right_bottom'
import RightTop from './components/right_top/right_top'

//按需加载
import {  Layout} from 'antd'

class App extends Component {
  constructor(props) {
    super(props)

  }

  componentDidMount() {
    this.props.setMusicListAsync()
  }

  cdStyle=()=>{
    return {
      'animationPlayState':this.props.Playing?'running':'paused',
      'backgroundImage':`url("./music/${encodeURI(this.props.musicList[this.props.currentMusic]!==undefined?this.props.musicList[this.props.currentMusic]:'')}.jpg")`
    }
  }

  render() {
   
    return (
      <div className="App">
        <div className='App-cd Cd-spin' style={this.cdStyle()}>
          <div className='App-cd-hole'></div>
        </div>
        <div>
          <Layout className="App-player">
              <Left/>
            <Layout>
              <RightTop/>
              <RightBottom/>
            </Layout>
          </Layout>
        </div>
      </div>
    )
  }

}

const stateMap = state => {
  return {
    currentMusic:state.currentMusic,
    musicList:state.musicList,
    Playing:state.Playing
  }
}
const actionsMap = dispatch => {
  return {
    setMusicListAsync: () => {
      dispatch(setMusicListAsync())
    }
  }
}


export default connect(stateMap, actionsMap)(App);
